<template>
  <div class="main_head">
    <div class="main_head_left">
      <!-- 根据条件渲染不同的菜单项 -->
      <div
        v-if="isHomePage"
        v-for="item in homeItems"
        :key="item.status"
        :class="['left_item', props.status == item.status ? 'on' : '']"
        @click="statusChange(item.status)"
      >
        {{ item.label }}
      </div>

      <div
        v-else-if="isClassPage"
        v-for="item in classItems"
        :key="item.status"
        :class="['left_item', props.status == item.status ? 'on' : '']"
        @click="statusChange(item.status)"
      >
        {{ item.label }}
      </div>
      <!-- 老师 -->
      <div
        v-else-if="
          isOtherTeacherPage &&
          isShowTeachEdit == true &&
          props.data.role[0] != 2
        "
        v-for="item in homeItems"
        :key="item.status"
        :class="['left_item', props.status == item.status ? 'on' : '']"
        @click="statusChange(item.status)"
      >
        {{ item.label }}
      </div>

      <div
        v-else-if="
          isOtherTeacherPage &&
          isShowTeachEdit == false &&
          props.data.role[0] != 2
        "
        v-for="item in otherTeacherItems"
        :key="item.status"
        :class="['left_item', props.status == item.status ? 'on' : '']"
        @click="statusChange(item.status)"
      >
        {{ item.label }}
      </div>
      <div
        v-else-if="isOtherTeacherPage && isShowStudentEdit == true"
        v-for="item in otherTeacherItems"
        :key="item.status"
        :class="['left_item', props.status == item.status ? 'on' : '']"
        @click="statusChange(item.status)"
      >
        {{ item.label }}
      </div>

      <div
        v-else-if="isOtherTeacherPage && isShowStudentEdit == false"
        v-for="item in otherTeacherItems"
        :key="item.status"
        :class="['left_item', props.status == item.status ? 'on' : '']"
        @click="statusChange(item.status)"
      >
        {{ item.label }}
      </div>
      <!-- 学生 -->
      <div
        v-else-if="isOtherStudentPage && isShowStudentEdit"
        v-for="item in homeItems"
        :key="item.status"
        :class="['left_item', props.status == item.status ? 'on' : '']"
        @click="statusChange(item.status)"
      >
        {{ item.label }}
      </div>

      <div
        v-else-if="isOtherStudentPage && props.data.role[0] != 2"
        v-for="item in homeItems"
        :key="item.status"
        :class="['left_item', props.status == item.status ? 'on' : '']"
        @click="statusChange(item.status)"
      >
        {{ item.label }}
      </div>

      <div
        v-else-if="isOtherStudentPage && isShowStudentEdit == false"
        v-for="item in otherStudentItems"
        :key="item.status"
        :class="['left_item', props.status == item.status ? 'on' : '']"
        @click="statusChange(item.status)"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="main_head_right">
      <el-input
        v-model="searchName"
        style="width: 240px"
        placeholder="请输入"
        :suffix-icon="Search"
        @keyup.enter.native="onSearch"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import { Search } from "@element-plus/icons-vue";

const props = defineProps(["data", "status", "id"]);
const emit = defineEmits(["statusChange", "onChangeIpt"]);
const searchName = defineModel("searchName");

const idName = ref(props.id != undefined ? props.id.slice(-1) : undefined);
const resName = ref(props.id != undefined ? props.id.slice(0, -1) : undefined);

console.log("idName.value: ", idName.value);
console.log("resName.value: ", resName.value);
// console.log("props.status: ", props.status);
// console.log("props.data.id: ", props.data.id);
const onSearch = (e) => {
  if (e.keyCode == 13) {
    if (searchName.value != "") {
      emit("onChangeIpt", searchName.value);
    }
  }
};
onMounted(() => {
  const box = document.querySelectorAll(".left_item");
  for (let i = 0; i < box.length; i++) {
    box[0].classList.add("on");
  }
});
// 判断当前页面类型
const isHomePage = computed(() => props.id === undefined);
const isClassPage = computed(() => idName.value === "3");
const isOtherTeacherPage = computed(() => idName.value === "1");
const isOtherStudentPage = computed(() => idName.value === "2");
const isShowTeachEdit = computed(() => props.data.id == resName.value);
const isShowStudentEdit = computed(() => props.data.id == resName.value);

// 菜单项定义
const homeItems = computed(() => {
  if (props.data.role[0] !== 2) {
    return [
      { status: 0, label: "个人公开作品" },
      { status: 1, label: "分享作品" },
      { status: 2, label: "编辑区" },
    ];
  } else {
    // student
    return [
      { status: 0, label: "个人公开作品" },
      { status: 1, label: "分享作品" },
      { status: 2, label: "编辑区" },
    ];
  }
});

const classItems = computed(() => {
  if (props.data.role[0] !== 2) {
    return [
      { status: 3, label: "公开分享作品" },
      { status: 4, label: "班内分享作品" },
      { status: 5, label: "" },
      { status: 1, label: "" },
      { status: 2, label: "" },
    ];
  } else {
    // student
    return [
      { status: 3, label: "公开分享作品" },
      { status: 4, label: "班内分享作品" },
      { status: 5, label: "" },
      { status: 1, label: "" },
      { status: 2, label: "" },
    ];
  }
});

const otherTeacherItems = computed(() => {
  if (props.data.role[0] !== 2) {
    return [
      { status: 0, label: "个人公开作品" },
      { status: 1, label: "分享作品" },
    ];
  } else {
    // student
    return [
      { status: 0, label: "个人公开作品" },
      { status: 1, label: "分享作品" },
    ];
  }
});

const otherStudentItems = computed(() => {
  if (props.data.role[0] !== 2) {
    return [
      { status: 0, label: "个人公开作品" },
      { status: 1, label: "分享作品" },
    ];
  } else {
    // student
    return [
      { status: 0, label: "个人公开作品" },
      { status: 1, label: "分享作品" },
    ];
  }
});
const isTeachOnStudent = computed(() => {
  if (props.data.role[0] !== 2) {
    return [
      { status: 0, label: "个人公开作品" },
      { status: 1, label: "分享作品" },
      { status: 2, label: "编辑区" },
    ];
  }
  //  else {
  //   // student
  //   return [
  //     { status: 0, label: "个人公开作品" },
  //     { status: 1, label: "分享作品" },
  //     { status: 2, label: "编辑区" },
  //   ];
  // }
});

// 触发状态变化
const statusChange = (newStatus) => {
  const box = document.querySelectorAll(".left_item");
  console.log("box: ", box);
  // 确保 box 不是空的
  if (!box.length) {
    console.error("没有找到任何.left_item元素");
    return;
  }

  // 移除所有元素的'on'类
  for (let i = 0; i < box.length; i++) {
    box[i].classList.remove("on");
  }

  // 检查newStatus是否在有效范围内
  if (newStatus >= 0 && newStatus < box.length) {
    // 如果在范围内，则添加'on'类
    box[newStatus].classList.add("on");
    // 假设emit是一个自定义的事件发射函数
    emit("statusChange", newStatus);
  } else {
    box[newStatus].classList.add("on");
    emit("statusChange", newStatus);
  }
};
</script>
<style scoped lang="scss">
.main_head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  height: 40px;
  padding-bottom: 16px;
  border-bottom: 1px dashed #ccc;
  // margin-bottom: 20px;
  .main_head_left {
    display: flex;
    .left_item {
      margin: 2px 10px;
      &.on {
        font-weight: bold;
        padding-bottom: 15px;
        border-bottom: 3px solid #3dc192;
        color: #3dc192;
      }
    }
  }
}
</style>
